<div>
  <lib-details-list-item
    key="Status"
    [icon]="statusIcon"
    valueTooltip="Status is deduced from the Ready condition"
  >
    {{ status }}
  </lib-details-list-item>

  <lib-details-list-item key="Name">
    {{ svc.metadata.name }}
  </lib-details-list-item>

  <lib-details-list-item key="Namespace">
    {{ svc.metadata.namespace }}
  </lib-details-list-item>

  <lib-details-list-item key="URL external" [copyValue]="externalUrl">
    {{ externalUrl }}
  </lib-details-list-item>

  <lib-details-list-item
    key="Annotations"
    [chipsList]="annotations"
    *ngIf="annotations.length"
  >
  </lib-details-list-item>

  <lib-details-list-item
    key="Labels"
    [chipsList]="labels"
    *ngIf="labels.length"
  >
  </lib-details-list-item>

  <lib-details-list-item key="Created">
    <lib-date-time [date]="svc?.metadata?.creationTimestamp"></lib-date-time>
  </lib-details-list-item>

  <!--predictor-->
  <lib-heading-row heading="Predictor:" subHeading="spec"> </lib-heading-row>

  <app-predictor-details
    [predictorSpec]="svc.spec.predictor"
  ></app-predictor-details>

  <!--transformer-->
  <ng-container *ngIf="svc.spec.transformer">
    <lib-heading-row heading="Transformer:" subHeading="spec">
    </lib-heading-row>

    <app-transformer-details
      [transformerSpec]="svc.spec.transformer"
    ></app-transformer-details>
  </ng-container>

  <!--explainer-->
  <ng-container *ngIf="svc.spec.explainer">
    <lib-heading-row heading="Explainer:" subHeading="spec"> </lib-heading-row>

    <app-explainer-details
      [explainerSpec]="svc.spec.explainer"
    ></app-explainer-details>
  </ng-container>
</div>
